<template>
  <div>
    <Page auto-content-height>
      <!-- 表格 -->
      <FosoTable
        ref="menuTable"
        :columns="tablecolumns"
        :request-api="getmenuListData"
        :show-add-button="false"
        @delete="DeleteHandle($event)"
        @edit="openDrawerHandle('edit', $event)"
      >
        <template #title>
          <text class="text-[16px]">
            {{ $t('customer.bind.bindcenter') }}
          </text>
        </template>
      </FosoTable>
    </Page>
    <!-- 弹窗框 -->
    <Drawer class="w-[40%]" @refresh="reloadTable" />
  </div>
</template>

<script setup lang="tsx">
import type { AgentList } from '#/api/agent/model/bindModel';

import { Page, useVbenDrawer } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { getAgentBindList } from '#/api/agent/bind';
import { deleteAgent } from '#/api/agent/list';

import ExtraDrawer from './components/drawer.vue';
import { tablecolumns } from './schemas';

const menuTableRef = useTemplateRef('menuTable');
// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});
// 获取客服数据
const getmenuListData = async () => {
  const res = await getAgentBindList({ page: 1, pageSize: 5000 }); // 调用实际的 API 获取数据
  return {
    total: res.data.length,
    items: res.data,
  };
};

/**
 * @author Buke
 * @description 打开弹窗
 * @param {string} type - 操作类型，'edit' 表示编辑，'add' 表示新增。
 * @param {AgentList} row - 要编辑的行数据对象，包含字典相关信息。
 * @returns {void}
 */
const openDrawerHandle = (type: string, row?: AgentList): void => {
  if (type === 'edit') {
    drawerApi.setState({ title: $t('customer.list.edit') });
    drawerApi.setData({ type: 'editData', id: row?.userId });
    drawerApi.open(); // 注意弹框打开需要分开，不能用同一个
  }
};

/**
 * @author Buke
 * @description 删除客服
 * @param {AgentList} row - 要删除的行数据。
 * @returns {void}
 */
async function DeleteHandle(row: AgentList): Promise<void> {
  await deleteAgent(row.id!);
  ElMessage.success($t('common.deleteSuccess'));
  menuTableRef.value?.gridApi.reload();
}

/**
 * @author Buke
 * @description 处理表格数据加载完成后的操作，如更新表格数据。
 * @returns {void}
 */
const reloadTable = (): void => {
  menuTableRef.value?.gridApi.reload();
  drawerApi.close();
};
</script>
